import { PropsWithChildren } from 'react';
import { useEffect, FC, useState, useRef } from 'react';
import { View, Text, Checkbox, CheckboxGroup, } from '@tarojs/components'
import { AtForm, AtInput, AtButton, AtToast, AtCheckbox } from 'taro-ui'
import './index.less'
import Taro from '@tarojs/taro';
import { useDispatch, useSelector } from 'react-redux';
import { Component } from '@tarojs/taro'
import { useSetState } from '@hooks/index.ts'
import { AtFormProps } from 'taro-ui/types/form';

const defaultUserInfo = {
  phone: '',
  code: ''
}

type UserInfoType = {
  phone: string | number,
  code: string | number,
}

const Index: FC<PropsWithChildren> = () => {
  // dispatch({ type: 'count/add', payload: 1 });
  const dispatch = useDispatch();
  const { count } = useSelector((store: any) => {
    return store.counter;
  });
  const [userInfo, setUserInfo] = useSetState<UserInfoType>(defaultUserInfo)
  const formRef = useRef<Component<AtFormProps, any, any>>(null);

  useEffect(() => {
    // 任何你需要在组件挂载时执行的副作用
  }, []);

  const onSubmit = () => {
  }
  const onReset = () => {
    setUserInfo(defaultUserInfo)
  }
  const handleChange = (type: string, value: string): void => {
    setUserInfo({
      [type]: value
    })
  }
  return (
    <View className="admin">
      <View className='body'>
        <View className='top'></View>
        <View className='bottom'>
          <AtForm
            ref={formRef}
            onSubmit={onSubmit}
            onReset={onReset}
            className='userInfoForm'
          >
            <View className='phoneNumberInfo'>
              <AtInput
                name='phonePrefix'
                type='number'
                border={false}
                placeholder='请输入手机号'
                value={userInfo.phone as string}
                onChange={(value: string) => handleChange('phone', value)}
              />
              <AtInput
                name='phoneSuffix'
                type='number'
                placeholder='请输入手机验证码'
                value={userInfo.code as string}
                onChange={(value: string) => handleChange('code', value)}
                border={false}
              />
            </View>
            <AtButton className='submit' formType='submit'>确定</AtButton>
          </AtForm>
        </View>
      </View>
    </View>
  );
};

export default Index;
